<template>
  <teleport to="body">
    <transition name="achievement-fade">
      <div v-if="visible" class="achievement-unlock-overlay" @click="handleClose">
        <div class="achievement-unlock-modal" @click.stop>
          <!-- 烟花效果 -->
          <div class="fireworks-container">
            <div class="firework" v-for="i in 6" :key="i" :style="getFireworkStyle(i)"></div>
          </div>

          <!-- 星星闪烁效果 -->
          <div class="stars-container">
            <div class="star" v-for="i in 20" :key="i" :style="getStarStyle(i)"></div>
          </div>

          <!-- 主内容 -->
          <div class="modal-content">
            <!-- 成就图标 -->
            <div class="achievement-icon-wrapper">
              <div class="icon-glow"></div>
              <div class="achievement-icon" :class="'level-' + achievement.level">
                {{ achievement.icon || '🏆' }}
              </div>
              <div class="icon-ring"></div>
            </div>

            <!-- 成就信息 -->
            <h2 class="achievement-title">🎉 成就解锁！</h2>
            <h3 class="achievement-name">{{ achievement.name }}</h3>
            <p class="achievement-description">{{ achievement.description }}</p>

            <!-- 等级徽章 -->
            <div class="achievement-badge">
              <el-tag :type="getLevelType(achievement.level)" size="large" effect="dark">
                {{ getLevelName(achievement.level) }}
              </el-tag>
            </div>

            <!-- 关闭按钮 -->
            <el-button type="primary" size="large" @click="handleClose" class="close-btn">
              太棒了！
            </el-button>
          </div>

          <!-- 彩带效果 -->
          <div class="confetti-container">
            <div class="confetti" v-for="i in 50" :key="i" :style="getConfettiStyle(i)"></div>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  achievement: {
    type: Object,
    default: () => ({
      name: '',
      description: '',
      icon: '🏆',
      level: 1
    })
  }
})

const emit = defineEmits(['close'])

// 关闭弹窗
const handleClose = () => {
  emit('close')
}

// 获取等级类型
const getLevelType = (level) => {
  const types = { 1: 'warning', 2: 'info', 3: 'danger' }
  return types[level] || 'warning'
}

// 获取等级名称
const getLevelName = (level) => {
  const names = { 1: '铜牌成就', 2: '银牌成就', 3: '金牌成就' }
  return names[level] || '铜牌成就'
}

// 生成烟花样式
const getFireworkStyle = (index) => {
  const angle = (index - 1) * 60
  const distance = 150
  const x = Math.cos(angle * Math.PI / 180) * distance
  const y = Math.sin(angle * Math.PI / 180) * distance
  return {
    '--x': `${x}px`,
    '--y': `${y}px`,
    animationDelay: `${index * 0.1}s`
  }
}

// 生成星星样式
const getStarStyle = (index) => {
  const randomX = Math.random() * 100
  const randomY = Math.random() * 100
  const randomDelay = Math.random() * 2
  const randomDuration = 1 + Math.random() * 2
  return {
    left: `${randomX}%`,
    top: `${randomY}%`,
    animationDelay: `${randomDelay}s`,
    animationDuration: `${randomDuration}s`
  }
}

// 生成彩带样式
const getConfettiStyle = (index) => {
  const randomX = Math.random() * 100
  const randomDelay = Math.random() * 2
  const randomDuration = 2 + Math.random() * 2
  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7', '#fd79a8']
  const randomColor = colors[Math.floor(Math.random() * colors.length)]
  return {
    left: `${randomX}%`,
    backgroundColor: randomColor,
    animationDelay: `${randomDelay}s`,
    animationDuration: `${randomDuration}s`
  }
}

// 监听弹窗显示，播放音效
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 可以在这里添加音效播放
    playSuccessSound()
  }
})

// 播放成功音效
const playSuccessSound = () => {
  // 创建音频上下文
  try {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)()
    const oscillator = audioContext.createOscillator()
    const gainNode = audioContext.createGain()

    oscillator.connect(gainNode)
    gainNode.connect(audioContext.destination)

    oscillator.frequency.value = 800
    oscillator.type = 'sine'

    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5)

    oscillator.start(audioContext.currentTime)
    oscillator.stop(audioContext.currentTime + 0.5)
  } catch (e) {
    console.log('音效播放失败', e)
  }
}
</script>

<style scoped>
.achievement-unlock-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.achievement-unlock-modal {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 30px;
  padding: 60px 40px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
}

@keyframes modalBounce {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* 烟花效果 */
.fireworks-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.firework {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  animation: fireworkExplode 1s ease-out forwards;
}

@keyframes fireworkExplode {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
}

/* 星星闪烁效果 */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 彩带效果 */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
  to {
    transform: translateY(600px) rotate(720deg);
    opacity: 0;
  }
}

/* 主内容 */
.modal-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* 成就图标 */
.achievement-icon-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 30px;
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

.achievement-icon {
  position: relative;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
  animation: iconFloat 3s ease-in-out infinite;
  border: 5px solid rgba(255, 255, 255, 0.3);
}

.achievement-icon.level-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
  box-shadow: 0 10px 30px rgba(192, 192, 192, 0.5);
}

.achievement-icon.level-3 {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5);
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.icon-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: ringExpand 2s ease-out infinite;
}

@keyframes ringExpand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* 文字样式 */
.achievement-title {
  font-size: 32px;
  font-weight: bold;
  color: white;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: titleBounce 0.8s ease-out 0.3s both;
}

@keyframes titleBounce {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  60% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.achievement-name {
  font-size: 28px;
  font-weight: bold;
  color: #ffd700;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: nameFadeIn 0.8s ease-out 0.5s both;
}

@keyframes nameFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.achievement-description {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 25px;
  line-height: 1.6;
  animation: descFadeIn 0.8s ease-out 0.7s both;
}

@keyframes descFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.achievement-badge {
  margin-bottom: 30px;
  animation: badgeSlideIn 0.8s ease-out 0.9s both;
}

@keyframes badgeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.close-btn {
  min-width: 200px;
  font-size: 18px;
  padding: 15px 40px;
  border-radius: 25px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: none;
  box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
  animation: btnPulse 2s ease-in-out infinite;
}

.close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 87, 108, 0.6);
}

@keyframes btnPulse {
  0%, 100% {
    box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
  }
  50% {
    box-shadow: 0 5px 25px rgba(245, 87, 108, 0.8);
  }
}

/* 过渡动画 */
.achievement-fade-enter-active,
.achievement-fade-leave-active {
  transition: opacity 0.3s ease;
}

.achievement-fade-enter-from,
.achievement-fade-leave-to {
  opacity: 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .achievement-unlock-modal {
    padding: 40px 20px;
  }

  .achievement-icon-wrapper {
    width: 120px;
    height: 120px;
  }

  .achievement-icon {
    width: 120px;
    height: 120px;
    font-size: 60px;
  }

  .achievement-title {
    font-size: 24px;
  }

  .achievement-name {
    font-size: 22px;
  }

  .achievement-description {
    font-size: 14px;
  }

  .close-btn {
    min-width: 150px;
    font-size: 16px;
    padding: 12px 30px;
  }
}
</style>

